import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    Text,
    TextInput,
    Image,
    TouchableOpacity
} from 'react-native';
import { AntDesign,Ionicons } from '@expo/vector-icons';
import '../features/Phone';

const renderItem = (item, navigation) => {
    return (
        <TouchableOpacity
            activeOpacity={0.8}
            onPress={()=>{navigation.navigate('Perfume',{item: item})}}
        >
            <View
                key={item.nose_id}
                style={{
                    width: w,
                    flexDirection: 'row',
                    paddingTop: 20,
                    paddingBottom: 20,
                    borderTopWidth: 0.4,
                    borderTopColor: 'lightgray',
                    borderBottomWidth: 0.4,
                    borderBottomColor: 'lightgray'
                }}
            >
                <View
                    style={{
                        width: p2d(210), 
                        height: p2d(210),
                        backgroundColor: 'white',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}
                >
                    <Image 
                        source={{uri:item.nose_logo}}
                        style={{width:p2d(60), height:p2d(120)}}
                    />
                </View>
                <View style={{width: w*0.9-p2d(210)-20}}>
                    <Text style={{fontSize:15}}>{item.nose_name}</Text>
                    <Text style={{
                        fontSize: 12,
                        color: 'gray',
                        marginTop: 5,
                        marginBottom: 5
                    }}>
                        {item.nose_score}分 {item.nose_num}人评价
                    </Text>
                    <Text style={{fontSize:12}}>前调：{item.nose_topTone}</Text>
                    <Text style={{fontSize:12}}>中调：{item.nose_middleTone}</Text>
                    <Text style={{fontSize:12}}>后调：{item.nose_afterTone}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
}

const Searchlist = ({route,navigation}) => {
    const [data,setData] = useState([]);
    const [txt,setTxt] = useState('');
    const sear = () => {
        fetch('http://175.27.190.73:9000/search', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({name: txt})
        })
            .then(res => res.json())
            .then(res => {
                if(res == '暂无相关内容！') {
                    setData('null');
                } else {
                    setData(res.nose);
                };
            })
    };

    useEffect(()=>{
        fetch('http://175.27.190.73:9000/search', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({name: route.params.name})
        })
            .then(res => res.json())
            .then(res => {
                if(res == '暂无相关内容！') {
                    setData('null');
                } else {
                    setData(res.nose);
                };
            })
    },[])

    return (
        <View style={{width:w}}>
            {/* 搜索框 */}
            <View style={{
                width: w,
                padding: 10,
                paddingRight: 18,
                paddingTop: 30,
                backgroundColor: 'white',
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                borderBottomWidth: 1,
                borderBottomColor: 'lightgray'
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.goBack()}}
                >
                    <Ionicons name="chevron-back" size={30} color="black" />
                </TouchableOpacity>
                <View style={{
                    width: w*0.8,
                    height: h*0.04,
                    borderRadius: h*0.02,
                    backgroundColor: '#e8e8e8',
                    flexDirection: 'row',
                    alignItems: 'center'
                }}>
                    <TextInput
                        value={txt}
                        onChangeText={e => setTxt(e)}
                        placeholder={route.params.name}
                        placeholderTextColor='gray'
                        style={{
                            width: '90%',
                            height: '100%',
                            color: 'gray',
                            paddingLeft: 18,
                        }}
                    />
                    <View style={{width:0, height:16, borderRightWidth:2, borderRightColor:'#cfcfcf', marginRight:6}}></View>
                    <TouchableOpacity
                        activeOpacity={0.7}
                        onPress={()=>{
                            if(txt!='') {
                                sear();
                            }
                        }}
                    >
                        <AntDesign name='search1' color='gray' size={20} />
                    </TouchableOpacity>
                </View>
            </View>

            {/* 搜索列表 */}
            <View style={{width:w, height:h*0.96-40, backgroundColor:'white'}}>
                {
                    data == 'null' ? 
                    <View style={{width:w, height:h*0.7, justifyContent:'center', alignItems:'center'}}>
                        <Image 
                            source={require('../assets/error/err.jpg')}
                            style={{width:200, height:200, marginBottom:20}}
                        />
                        <Text style={{fontSize:16, color:'#3a55a4'}}>你来到了一片没有气味的荒原</Text>
                        <Text style={{fontSize:16, color:'#3a55a4'}}>换个词再试试吧~</Text>
                    </View> :
                    <FlatList 
                        data={data}
                        keyExtractor={(item) => item.nose_id}
                        renderItem={({item})=>{
                            return renderItem(item,navigation);
                        }}
                    />
                }
            </View>
        </View>
    )
}

export default Searchlist